// 页面切换功能
// 全局API配置
const API_CONFIG = {
    getBaseUrl: function() {
        return window.location.protocol + '//' + window.location.hostname + ':3002';
    },
    
    fetch: function(endpoint, options = {}) {
        const url = this.getBaseUrl() + endpoint;
        console.log('API请求:', url);
        
        return fetch(url, {
            ...options,
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            }
        }).then(response => {
            console.log('API响应状态:', response.status);
            console.log('API响应内容类型:', response.headers.get('content-type'));
            
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }
            
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                throw new Error('服务器返回的不是JSON格式数据');
            }
            
            return response.json();
        });
    }
};

document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面
    initializePage();
    
    // 页面切换
    const tabButtons = document.querySelectorAll('.tab-button');
    const pages = document.querySelectorAll('.page');

    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetPage = this.id.replace('-tab', '');
            
            // 更新激活的标签
            tabButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // 显示目标页面
            pages.forEach(page => {
                page.classList.remove('active');
                if (page.id === targetPage) {
                    page.classList.add('active');
                }
            });
            
            // 根据页面刷新数据
            switch(targetPage) {
                case 'streams':
                    loadStreams();
                    break;
                case 'drones':
                    loadDrones();
                    break;
                case 'test':
                    // 测试页面自动检查系统状态
                    setTimeout(() => {
                        if (typeof checkSystemStatus === 'function') {
                            checkSystemStatus();
                        }
                    }, 100);
                    break;
            }
        });
    });

    // 添加无人机模态框
    const modal = document.getElementById('add-drone-modal');
    const addDroneBtn = document.getElementById('add-drone');
    const closeBtn = document.querySelector('.close');

    addDroneBtn.onclick = function() {
        modal.style.display = 'block';
    }

    closeBtn.onclick = function() {
        modal.style.display = 'none';
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

    // 表单提交事件
    document.getElementById('add-drone-form').addEventListener('submit', function(e) {
        e.preventDefault();
        addDrone();
    });

    document.getElementById('server-config-form').addEventListener('submit', function(e) {
        e.preventDefault();
        saveConfig();
    });

    // 刷新按钮事件
    document.getElementById('refresh-streams').addEventListener('click', loadStreams);
    document.getElementById('refresh-drones').addEventListener('click', loadDrones);

    // 初始化数据 - 加载所有页面的数据
    loadDashboard();
    loadStreams();
    loadDrones();
});

// 初始化页面
function initializePage() {
    // 检查服务器健康状态
    checkServerHealth();
    
    // 设置定时刷新
    setInterval(() => {
        const activePage = document.querySelector('.page.active');
        if (activePage) {
            switch(activePage.id) {
                case 'dashboard':
                    loadDashboard();
                    break;
                case 'streams':
                    loadStreams();
                    break;
                case 'drones':
                    loadDrones();
                    break;
            }
        }
    }, 10000); // 每10秒刷新一次
}

// 全局刷新函数 - 强制重新加载所有数据
function refreshAllData() {
    console.log('强制刷新所有数据...');
    
    // 显示加载状态
    showNotification('正在刷新数据...', 'info');
    
    // 并行加载所有数据
    Promise.all([
        loadDashboard(),
        loadStreams(), 
        loadDrones()
    ]).then(() => {
        showNotification('数据刷新完成', 'success');
        console.log('所有数据已刷新');
    }).catch(error => {
        console.error('数据刷新失败:', error);
        showNotification('数据刷新失败', 'error');
    });
}

// 监听页面显示事件，在页面重新变为可见时刷新数据
document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
        console.log('页面重新变为可见，刷新数据');
        refreshAllData();
    }
});

// 监听窗口获得焦点事件
window.addEventListener('focus', function() {
    console.log('窗口获得焦点，刷新数据');
    refreshAllData();
});

// 页面可见性处理 - 当测试播放器页面不可见时停止播放，可见时重新播放以解决延迟问题
document.addEventListener('visibilitychange', function() {
    // 只在测试页面处理播放器可见性
    const testSection = document.querySelector('.test-section');
    if (testSection && typeof testFlvPlayer !== 'undefined') {
        if (document.hidden) {
            // 页面隐藏时，停止播放
            stopFlv();
            showTestStatus('flvStatus', '页面隐藏，已暂停播放', 'info');
        } else {
            // 页面重新可见时，重新开始播放
            const flvUrl = document.getElementById('flvUrl').value;
            if (flvUrl) {
                playFlv();
                showTestStatus('flvStatus', '页面恢复，重新连接...', 'info');
            }
        }
    }
});

// 检查服务器健康状态
function checkServerHealth() {
    fetch('/api/health')
        .then(response => response.json())
        .then(data => {
            if (data.status === 'ok') {
                showNotification('服务器运行正常', 'success');
            } else {
                showNotification('服务器状态异常', 'warning');
            }
        })
        .catch(error => {
            console.error('服务器健康检查失败:', error);
            showNotification('服务器连接失败', 'error');
        });
}

// 显示通知
function showNotification(message, type = 'info') {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.textContent = message;
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 3秒后自动消失
    setTimeout(() => {
        if (notification.parentNode) {
            notification.parentNode.removeChild(notification);
        }
    }, 3000);
}

// 加载仪表板数据
function loadDashboard() {
    // 获取实时的流数据
    Promise.all([
        API_CONFIG.fetch('/api/streams'),
        API_CONFIG.fetch('/api/drones'),
        API_CONFIG.fetch('/api/dji/streams')
    ])
    .then(([streamsResult, dronesResult, djiStreamsResult]) => {
        // 更新活动流数量
        let activeStreamCount = 0;
        if (streamsResult.success && streamsResult.data.publishers) {
            activeStreamCount = Object.keys(streamsResult.data.publishers).length;
        }
        document.getElementById('active-streams').textContent = activeStreamCount.toString();
        
        // 更新无人机数量
        let droneCount = 0;
        if (dronesResult.success) {
            droneCount = dronesResult.data.length;
        }
        // 如果有无人机数量的元素，更新它
        const dronesCountElement = document.getElementById('total-drones');
        if (dronesCountElement) {
            dronesCountElement.textContent = droneCount.toString();
        }
        
        // 更新DJI活动流数量
        let djiActiveCount = 0;
        if (djiStreamsResult.success) {
            djiActiveCount = djiStreamsResult.data.length;
        }
        const djiActiveElement = document.getElementById('dji-active-streams');
        if (djiActiveElement) {
            djiActiveElement.textContent = djiActiveCount.toString();
        }
        
        console.log(`仪表板数据已更新: 活动流=${activeStreamCount}, 无人机=${droneCount}, DJI活动流=${djiActiveCount}`);
    })
    .catch(error => {
        console.error('加载仪表板数据失败:', error);
        // 如果加载失败，使用默认值
        document.getElementById('active-streams').textContent = '0';
        const dronesCountElement = document.getElementById('total-drones');
        if (dronesCountElement) {
            dronesCountElement.textContent = '0';
        }
        const djiActiveElement = document.getElementById('dji-active-streams');
        if (djiActiveElement) {
            djiActiveElement.textContent = '0';
        }
    })
    .finally(() => {
        // 绘制图表
        drawChart();
    });
}

// 绘制图表
function drawChart() {
    const canvas = document.getElementById('stream-chart');
    const ctx = canvas.getContext('2d');
    
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 绘制简单的图表
    ctx.beginPath();
    ctx.moveTo(0, 100);
    ctx.lineTo(50, 80);
    ctx.lineTo(100, 120);
    ctx.lineTo(150, 60);
    ctx.lineTo(200, 90);
    ctx.lineTo(250, 70);
    ctx.lineTo(300, 110);
    ctx.lineTo(350, 90);
    ctx.lineTo(400, 100);
    ctx.strokeStyle = '#3498db';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 添加标签
    ctx.fillStyle = '#2c3e50';
    ctx.font = '12px Arial';
    ctx.fillText('流媒体流量', 10, 20);
}

// 加载流列表
function loadStreams() {
    return API_CONFIG.fetch('/api/streams')
        .then(data => {
            const tbody = document.querySelector('#streams-table tbody');
            tbody.innerHTML = '';
            
            if (data.success && data.data.publishers) {
                Object.keys(data.data.publishers).forEach(streamId => {
                    const stream = data.data.publishers[streamId];
                    const row = document.createElement('tr');
                    
                    row.innerHTML = `
                        <td>${streamId}</td>
                        <td>RTMP</td>
                        <td>${stream.ip}</td>
                        <td>${new Date(stream.startupTime).toLocaleString()}</td>
                        <td>
                            <button onclick="playStream('${streamId}')">播放</button>
                            <button onclick="disconnectStream('${streamId}')">断开</button>
                        </td>
                    `;
                    
                    tbody.appendChild(row);
                });
            }
            console.log('流列表已更新');
        })
        .catch(error => {
            console.error('加载流列表失败:', error);
            throw error; // 重新抛出错误以便上层函数处理
        });
}

// 加载无人机列表
function loadDrones() {
    // 获取数据库中的无人机和活动流
    return Promise.all([
        API_CONFIG.fetch('/api/drones'),
        API_CONFIG.fetch('/api/dji/streams')
    ])
    .then(([dronesResult, streamsResult]) => {
        const tbody = document.querySelector('#drones-table tbody');
        tbody.innerHTML = '';
        
        if (dronesResult.success && streamsResult.success) {
            // 创建活动流映射
            const activeStreams = new Map();
            streamsResult.data.forEach(stream => {
                activeStreams.set(stream.id, stream);
            });
            
            // 显示所有无人机
            dronesResult.data.forEach(drone => {
                const row = document.createElement('tr');
                const isActive = activeStreams.has(drone.id);
                const stream = activeStreams.get(drone.id);
                
                // 截断源地址显示（仅显示前50个字符）
                const sourceUrl = stream && stream.sourceRtmpUrl ? 
                    (stream.sourceRtmpUrl.length > 50 ? 
                        stream.sourceRtmpUrl.substring(0, 50) + '...' : 
                        stream.sourceRtmpUrl) : 'N/A';
                
                row.innerHTML = `
                    <td>${drone.id}</td>
                    <td>${drone.name || 'N/A'}</td>
                    <td>${drone.status}</td>
                    <td title="${stream && stream.sourceRtmpUrl ? stream.sourceRtmpUrl : 'N/A'}">${sourceUrl}</td>
                    <td>${new Date(drone.created_at).toLocaleString()}</td>
                    <td>${isActive ? '<span style="color: green;">在线</span>' : '<span style="color: red;">离线</span>'}</td>
                    <td>
                        ${isActive ? 
                            `<button onclick="viewStreamDetails('${drone.id}')"><i class="icon-info"></i>详情</button>
                             <button onclick="playStream('${drone.id}')"><i class="icon-play"></i>播放</button>
                             <button onclick="removePullStream('${drone.id}')" style="background-color: #e74c3c;"><i class="icon-stop"></i>停止拉流</button>` : 
                            `<button onclick="addPullStream('${drone.id}')" style="background-color: #27ae60;"><i class="icon-plus"></i>添加拉流</button>`}
                        <button onclick="removeDrone('${drone.id}')" style="background-color: #95a5a6;"><i class="icon-trash"></i>移除</button>
                    </td>
                `;
                
                tbody.appendChild(row);
            });
        }
        console.log('无人机列表已更新');
    })
    .catch(error => {
        console.error('加载无人机列表失败:', error);
        throw error; // 重新抛出错误以便上层函数处理
    });
}


// 查看流详情
function viewStreamDetails(droneId) {
    fetch(`/api/stream/${droneId}/details`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const details = data.data;
                let detailsHtml = `
                    <h3>无人机 ${droneId} 流详情</h3>
                    <div style="margin: 20px 0;">
                        <h4>无人机信息：</h4>
                        <p><strong>ID:</strong> ${details.drone ? details.drone.id : 'N/A'}</p>
                        <p><strong>名称:</strong> ${details.drone ? (details.drone.name || 'N/A') : 'N/A'}</p>
                        <p><strong>状态:</strong> ${details.drone ? details.drone.status : 'N/A'}</p>
                        <p><strong>创建时间:</strong> ${details.drone ? new Date(details.drone.created_at).toLocaleString() : 'N/A'}</p>
                    </div>
                `;
                
                if (details.activeStream) {
                    detailsHtml += `
                        <div style="margin: 20px 0;">
                            <h4>活动流信息：</h4>
                            <p><strong>源地址:</strong> <code>${details.activeStream.sourceRtmpUrl}</code></p>
                            <p><strong>目标地址:</strong> <code>${details.activeStream.targetRtmpUrl}</code></p>
                            <p><strong>流类型:</strong> ${details.activeStream.sourceType || 'RTMP'}</p>
                            <p><strong>开始时间:</strong> ${new Date(details.activeStream.startTime).toLocaleString()}</p>
                        </div>
                    `;
                }
                
                if (details.dbStreams && details.dbStreams.length > 0) {
                    detailsHtml += `
                        <div style="margin: 20px 0;">
                            <h4>数据库中的流记录：</h4>
                            <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
                                <thead>
                                    <tr style="background-color: #f8f9fa;">
                                        <th style="border: 1px solid #ddd; padding: 8px;">流ID</th>
                                        <th style="border: 1px solid #ddd; padding: 8px;">流名称</th>
                                        <th style="border: 1px solid #ddd; padding: 8px;">RTMP地址</th>
                                        <th style="border: 1px solid #ddd; padding: 8px;">状态</th>
                                        <th style="border: 1px solid #ddd; padding: 8px;">开始时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                    `;
                    
                    details.dbStreams.forEach(stream => {
                        detailsHtml += `
                            <tr>
                                <td style="border: 1px solid #ddd; padding: 8px;">${stream.id}</td>
                                <td style="border: 1px solid #ddd; padding: 8px;">${stream.stream_name || 'N/A'}</td>
                                <td style="border: 1px solid #ddd; padding: 8px;"><code>${stream.rtmp_url}</code></td>
                                <td style="border: 1px solid #ddd; padding: 8px;">
                                    <span style="color: ${stream.status === 'active' ? 'green' : 'red'};">${stream.status}</span>
                                </td>
                                <td style="border: 1px solid #ddd; padding: 8px;">${new Date(stream.start_time).toLocaleString()}</td>
                            </tr>
                        `;
                    });
                    
                    detailsHtml += `
                                </tbody>
                            </table>
                        </div>
                    `;
                }
                
                if (details.playUrls) {
                    detailsHtml += `
                        <div style="margin: 20px 0;">
                            <h4>播放地址：</h4>
                            <p><strong>RTMP:</strong> <code>${details.playUrls.rtmpUrl}</code></p>
                            <p><strong>HTTP-FLV:</strong> <code>${details.playUrls.httpFlvUrl}</code></p>
                        </div>
                    `;
                }
                
                // 显示在新窗口中
                const detailsWindow = window.open('', '_blank', 'width=800,height=600,scrollbars=yes');
                detailsWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>流详情 - ${droneId}</title>
                        <style>
                            body { 
                                font-family: Arial, sans-serif; 
                                margin: 20px; 
                                line-height: 1.6;
                            }
                            h3, h4 { color: #2c3e50; }
                            code { 
                                background-color: #f4f4f4; 
                                padding: 2px 4px; 
                                border-radius: 3px;
                                word-break: break-all;
                            }
                            .close-btn {
                                position: fixed;
                                top: 10px;
                                right: 10px;
                                background-color: #e74c3c;
                                color: white;
                                border: none;
                                padding: 10px 15px;
                                border-radius: 5px;
                                cursor: pointer;
                            }
                        </style>
                    </head>
                    <body>
                        <button class="close-btn" onclick="window.close()">关闭</button>
                        ${detailsHtml}
                    </body>
                    </html>
                `);
                detailsWindow.document.close();
            } else {
                alert('获取流详情失败: ' + (data.message || data.error));
            }
        })
        .catch(error => {
            console.error('获取流详情失败:', error);
            alert('获取流详情失败: ' + error.message);
        });
}

// 添加拉流任务
function addPullStream(droneId) {
    const sourceUrl = prompt(`请输入无人机 ${droneId} 的源地址 (RTMP 或 RTSP):`, 'rtsp://');
    if (sourceUrl) {
        // 验证URL格式
        const isRtsp = sourceUrl.toLowerCase().startsWith('rtsp://');
        const isRtmp = sourceUrl.toLowerCase().startsWith('rtmp://');
        
        if (!isRtsp && !isRtmp) {
            alert('不支持的流媒体协议，仅支持RTMP和RTSP');
            return;
        }
        
        API_CONFIG.fetch('/api/dji/stream/pull', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ 
                droneId: droneId,
                sourceRtmpUrl: sourceUrl
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`已添加${data.sourceType}拉流任务: ${droneId}`);
                loadDrones();
            } else {
                alert(`添加拉流任务失败: ${data.message || data.error}`);
            }
        })
        .catch(error => {
            console.error('添加拉流任务失败:', error);
            alert('添加拉流任务失败: ' + error.message);
        });
    }
}

// 移除拉流任务
function removePullStream(droneId) {
    if (confirm(`确定要停止无人机 ${droneId} 的拉流任务吗?`)) {
        fetch(`/api/dji/stream/pull/${droneId}`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`已停止拉流任务: ${droneId}`);
                loadDrones();
            } else {
                alert(`停止拉流任务失败: ${data.message || data.error}`);
            }
        })
        .catch(error => {
            console.error('停止拉流任务失败:', error);
            alert('停止拉流任务失败: ' + error.message);
        });
    }
}

// 播放流
function playStream(droneId) {
    fetch(`/api/stream/${droneId}/urls`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 创建新窗口播放流
                const playWindow = window.open('', '_blank');
                playWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>播放流 - ${droneId}</title>
                        <style>
                            body { 
                                margin: 0; 
                                padding: 20px; 
                                font-family: Arial, sans-serif;
                                background: #000;
                                color: #fff;
                            }
                            .container {
                                max-width: 1200px;
                                margin: 0 auto;
                            }
                            .video-container {
                                width: 100%;
                                text-align: center;
                            }
                            video {
                                max-width: 100%;
                                height: auto;
                            }
                            .play-options {
                                margin-top: 20px;
                                text-align: center;
                            }
                            .btn {
                                background: #3498db;
                                color: white;
                                border: none;
                                padding: 10px 20px;
                                margin: 5px;
                                border-radius: 4px;
                                cursor: pointer;
                            }
                            .btn:hover {
                                background: #2980b9;
                            }
                            .url-info {
                                background: #333;
                                padding: 15px;
                                border-radius: 4px;
                                margin: 20px 0;
                                word-break: break-all;
                            }
                            .error-message {
                                color: #ff6b6b;
                                background: #333;
                                padding: 15px;
                                border-radius: 4px;
                                margin: 20px 0;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="container">
                            <h1>无人机流播放 - ${droneId}</h1>
                            
                            <div class="url-info">
                                <h3>HTTP-FLV 播放地址:</h3>
                                <p>${data.data.httpFlvUrl}</p>
                                <h3>RTMP 播放地址:</h3>
                                <p>${data.data.rtmpUrl}</p>
                            </div>
                            
                            <div class="play-options">
                                <button class="btn" onclick="playHttpFlv()">播放 HTTP-FLV</button>
                                <button class="btn" onclick="showRtmpInfo()">RTMP 播放说明</button>
                            </div>
                            
                            <div class="video-container">
                                <video id="videoPlayer" controls autoplay></video>
                                <div id="errorMessage" class="error-message" style="display: none;"></div>
                            </div>
                        </div>
                        
                        <script src="flv.min.js"></script>
                        <script>
                            function showErrorMessage(message) {
                                const errorDiv = document.getElementById('errorMessage');
                                errorDiv.textContent = message;
                                errorDiv.style.display = 'block';
                            }
                            
                            function playHttpFlv() {
                                const video = document.getElementById('videoPlayer');
                                
                                // 检查是否支持FLV.js
                                if (typeof flvjs !== 'undefined' && flvjs.isSupported()) {
                                    // 清理之前的播放器
                                    if (window.flvPlayer) {
                                        window.flvPlayer.destroy();
                                    }
                                    
                                    // 创建FLV播放器，使用优化的配置减少加载时间
                                    window.flvPlayer = flvjs.createPlayer({
                                        type: 'flv',
                                        url: '${data.data.httpFlvUrl}',
                                        isLive: true,              // 启用直播模式
                                        enableStashBuffer: false,  // 禁用缓冲以降低延迟
                                        stashInitialSize: 1,       // 最小缓冲区大小
                                        // 添加以下配置以优化加载速度
                                        lazyLoad: false,           // 禁用懒加载
                                        autoCleanupSourceBuffer: true, // 自动清理源缓冲区
                                        fixAudioTimestampGap: false, // 禁用音频时间戳修复以降低延迟
                                        // 提高画面质量的配置
                                        seekType: 'range',         // 使用range请求以提高稳定性
                                        rangeLoadZeroStart: true,  // 从0开始加载range
                                        accurateSeek: true,        // 精确seek以提高播放准确性
                                        // 进一步优化画面质量
                                        referer: '',               // 设置referer头
                                        headers: {                 // 自定义HTTP头
                                            'Accept': '*/*',
                                            'Cache-Control': 'no-cache'
                                        }
                                    }, {
                                        // 优化加载性能的配置
                                        enableWorker: false,       // 禁用Worker以减少初始化时间
                                        enableStashBuffer: false,
                                        stashInitialSize: 1,
                                        // 提高画面质量的配置
                                        deferLoadAfterSourceOpen: false, // 立即加载而不是等待sourceopen事件
                                        // 进一步优化配置
                                        maxBufferLength: 1,        // 减少缓冲区长度以降低延迟
                                        maxMaxBufferLength: 3,     // 最大缓冲区长度
                                        // 解决画面闪烁的配置
                                        streamingAccuracy: 'high', // 高精度流媒体播放
                                        enableWorkerForMSE: false, // 禁用MSE的Worker以提高兼容性
                                        // 进一步优化播放稳定性
                                        maxFragLookUpTolerance: 0.1, // 减少片段查找容差
                                        liveBufferLatencyChasing: true, // 实时缓冲延迟追踪
                                        liveBufferLatencyMaxLatency: 1.0, // 最大实时缓冲延迟
                                        liveBufferLatencyMinRemain: 0.5  // 最小实时缓冲剩余
                                    });
                                    
                                    window.flvPlayer.attachMediaElement(video);
                                    
                                    // 添加加载进度事件
                                    window.flvPlayer.on(flvjs.Events.STATISTICS_INFO, (statInfo) => {
                                        if (statInfo && statInfo.speed) {
                                            showTestStatus('flvStatus', 'FLV流连接成功，正在播放', 'success');
                                        }
                                    });
                                    
                                    window.flvPlayer.load();

                                    console.log('使用FLV.js播放器播放HTTP-FLV流');
                                } else {
                                    // 回退到直接播放（某些浏览器可能支持）
                                    video.src = '${data.data.httpFlvUrl}';
                                    video.play().catch(error => {
                                        console.error('直接播放FLV失败:', error);
                                        showErrorMessage('您的浏览器不支持FLV播放，建议使用Chrome或Firefox浏览器');
                                    });
                                }

                            }
                            
                            function showRtmpInfo() {
                                alert('RTMP地址:\\n${data.data.rtmpUrl}\\n\\n请使用支持RTMP的播放器（如VLC）播放此地址');
                            }
                        </script>
                    </body>
                    </html>
                `);
                playWindow.document.close();
            } else {
                alert('获取播放地址失败: ' + (data.message || data.error));
            }
        })
        .catch(error => {
            console.error('获取播放地址失败:', error);
            alert('获取播放地址失败: ' + error.message);
        });
}

// 添加无人机
function addDrone() {
    const droneId = document.getElementById('drone-id').value;
    const droneName = document.getElementById('drone-name').value;
    const rtmpUrl = document.getElementById('rtmp-url').value;
    
    if (!droneId) {
        alert('请输入无人机ID');
        return;
    }
    
    // 使用全局API配置
    API_CONFIG.fetch('/api/drones', {
        method: 'POST',
        body: JSON.stringify({ 
            droneId: droneId,
            droneName: droneName,
            rtmpUrl: rtmpUrl
        })
    })
    .then(data => {
        console.log('API响应数据:', data);
        
        if (data.success) {
            alert(`无人机已成功添加！\nID: ${droneId}\n名称: ${droneName || 'N/A'}`);
            
            // 关闭模态框
            document.getElementById('add-drone-modal').style.display = 'none';
            
            // 重置表单
            document.getElementById('add-drone-form').reset();
            
            // 刷新无人机列表
            loadDrones();
        } else {
            alert(`添加无人机失败: ${data.message || data.error}`);
        }
    })
    .catch(error => {
        console.error('添加无人机失败:', error);
        alert('添加无人机失败: ' + error.message);
    });
}

// 根据无人机ID自动更新RTMP地址
function updateRtmpUrl() {
    const droneId = document.getElementById('drone-id').value;
    const rtmpUrlInput = document.getElementById('rtmp-url');
    
    if (droneId) {
        // 自动生成RTMP地址，优先使用RTSP地址格式（适合大疆无人机）
        if (droneId.toUpperCase().startsWith('DJI')) {
            // 大疆无人机默认使用RTSP地址格式
            rtmpUrlInput.value = `rtsp://192.168.1.100/live/${droneId}`;
            rtmpUrlInput.placeholder = `示例: rtsp://192.168.1.100/live/${droneId}`;
        } else {
            // 其他无人机使用RTMP地址格式
            rtmpUrlInput.value = `rtmp://localhost:1937/live/${droneId}`;
            rtmpUrlInput.placeholder = `示例: rtmp://localhost:1937/live/${droneId}`;
        }
    } else {
        rtmpUrlInput.value = '';
        rtmpUrlInput.placeholder = 'rtmp://localhost:1937/live/drone1';
    }
}

// 移除无人机
function removeDrone(droneId) {
    if (confirm(`确定要移除无人机 ${droneId} 吗？这将同时停止相关的流媒体任务。`)) {
        // 调用实际的API来删除无人机
        API_CONFIG.fetch(`/api/drones/${droneId}`, {
            method: 'DELETE'
        })
        .then(data => {
            if (data.success) {
                alert(`无人机 ${droneId} 已成功移除！`);
                loadDrones(); // 刷新列表
            } else {
                alert(`移除无人机失败: ${data.message || data.error}`);
            }
        })
        .catch(error => {
            console.error('移除无人机失败:', error);
            alert('移除无人机失败: ' + error.message);
        });
    }
}

// 断开流连接
function disconnectStream(streamId) {
    if (confirm(`确定要断开流 ${streamId} 吗?`)) {
        // 这里应该调用实际的API来断开流连接
        alert(`流 ${streamId} 已断开`);
        loadStreams();
    }
}

// 测试功能
let testFlvPlayer = null;

function showTestStatus(elementId, message, type = 'info') {
    const element = document.getElementById(elementId);
    if (element) {
        element.className = `status ${type}`;
        element.textContent = message;
        element.style.display = 'block';
        element.style.background = type === 'success' ? '#d4edda' : type === 'error' ? '#f8d7da' : '#d1ecf1';
        element.style.color = type === 'success' ? '#155724' : type === 'error' ? '#721c24' : '#0c5460';
        element.style.border = type === 'success' ? '1px solid #c3e6cb' : type === 'error' ? '1px solid #f5c6cb' : '1px solid #bee5eb';
    }
}

async function checkSystemStatus() {
    try {
        const response = await fetch('/api/health');
        const data = await response.json();
        
        let message = `系统状态: ${data.status}\n`;
        message += `数据库: ${data.services.database}\n`;
        message += `流服务器: ${data.services.streamServer}\n`;
        message += `活跃流数量: ${data.services.activeStreams}\n`;
        
        // 检查浏览器支持
        message += `\n浏览器支持:\n`;
        message += `FLV.js: ${typeof flvjs !== 'undefined' ? '✅ 已加载' : '❌ 未加载'}\n`;
        if (typeof flvjs !== 'undefined') {
            message += `FLV支持: ${flvjs.isSupported() ? '✅ 支持' : '❌ 不支持'}\n`;
        }
        message += `HLS原生支持: ${document.createElement('video').canPlayType('application/vnd.apple.mpegurl') ? '✅ 支持' : '❌ 不支持'}\n`;
        
        showTestStatus('systemStatus', message, data.status === 'ok' ? 'success' : 'error');
    } catch (error) {
        showTestStatus('systemStatus', `系统检查失败: ${error.message}`, 'error');
    }
}

async function testFlvUrl() {
    const url = document.getElementById('flvUrl').value;
    try {
        const response = await fetch(url, { method: 'HEAD' });
        if (response.ok) {
            const contentLength = response.headers.get('content-length');
            showTestStatus('flvStatus', `FLV地址可访问，状态码: ${response.status}，内容长度: ${contentLength || '未知'}`, 'success');
        } else {
            showTestStatus('flvStatus', `FLV地址不可访问，状态码: ${response.status}`, 'error');
        }
    } catch (error) {
        showTestStatus('flvStatus', `FLV地址测试失败: ${error.message}`, 'error');
    }
}

function playFlv() {
    const url = document.getElementById('flvUrl').value;
    const video = document.getElementById('flvVideo');
    
    stopFlv(); // 先停止之前的播放
    
    // 检查是否支持FLV.js
    if (typeof flvjs !== 'undefined' && flvjs.isSupported()) {
        try {
            console.log('创建FLV播放器，URL:', url);
            
            // 使用简化且稳定的配置
            testFlvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: url,
                isLive: true,              // 启用直播模式
                enableStashBuffer: false,  // 禁用缓冲以降低延迟
                stashInitialSize: 1        // 最小缓冲区大小
            });
            
            testFlvPlayer.attachMediaElement(video);
            
            testFlvPlayer.on(flvjs.Events.ERROR, function(errorType, errorDetail, errorInfo) {
                console.error('FLV播放器错误:', errorType, errorDetail, errorInfo);
                let errorMsg = 'FLV播放错误: ';
                if (errorDetail) {
                    errorMsg += errorDetail;
                } else {
                    errorMsg += errorType;
                }
                showTestStatus('flvStatus', errorMsg, 'error');
            });
            
            testFlvPlayer.on(flvjs.Events.LOADING_COMPLETE, function() {
                console.log('FLV加载完成');
                showTestStatus('flvStatus', 'FLV流加载完成', 'success');
            });
            
            testFlvPlayer.on(flvjs.Events.METADATA_ARRIVED, function(metadata) {
                console.log('FLV元数据:', metadata);
                showTestStatus('flvStatus', 'FLV流连接成功，正在播放', 'success');
            });
            
            testFlvPlayer.load();
            
            console.log('使用FLV.js播放器播放HTTP-FLV流');
            showTestStatus('flvStatus', '正在连接FLV流...', 'info');
            
        } catch (error) {
            console.error('FLV播放器创建失败:', error);
            showTestStatus('flvStatus', `FLV播放器创建失败: ${error.message}`, 'error');
            tryAlternativeFlvPlay(video, url);
        }
    } else {
        console.log('FLV.js库未加载或不支持');
        // 回退到直接播放（某些浏览器可能支持）
        video.src = url;
        video.play().catch(error => {
            console.error('直接播放FLV失败:', error);
            showTestStatus('flvStatus', '您的浏览器不支持FLV播放，建议使用Chrome或Firefox浏览器，或者尝试HLS播放', 'error');
        });
    }
}

function tryAlternativeFlvPlay(video, url) {
    // 提供替代方案
    const message = `
浏览器不支持FLV直接播放。建议：
1. 使用VLC播放器打开: ${url}
2. 尝试RTMP地址: rtmp://localhost:1937/live/DJI001`;
    
    showTestStatus('flvStatus', message, 'error');
    
    // 显示播放器下载链接
    const container = document.getElementById('flvVideo').parentNode;
    if (!container.querySelector('.player-links')) {
        const linksDiv = document.createElement('div');
        linksDiv.className = 'player-links';
        linksDiv.innerHTML = `
            <p style="margin: 10px 0; color: #666;">推荐播放器：</p>
            <button onclick="copyToClipboard('${url}')" style="margin: 5px;">复制FLV地址</button>
            <button onclick="copyToClipboard('rtmp://localhost:1937/live/DJI001')" style="margin: 5px;">复制RTMP地址</button>
            <br><small style="color: #888;">复制地址后在VLC等播放器中打开</small>
        `;
        container.appendChild(linksDiv);
    }
}

function stopFlv() {
    const video = document.getElementById('flvVideo');
    
    // 清理之前的播放器
    if (testFlvPlayer) {
        testFlvPlayer.destroy();
        testFlvPlayer = null;
    }
    
    // 清理video元素
    video.pause();
    video.src = '';
    
    // 清理播放器链接
    const container = video.parentNode;
    const existingLinks = container.querySelector('.player-links');
    if (existingLinks) {
        existingLinks.remove();
    }
    
    showTestStatus('flvStatus', 'FLV播放已停止', 'info');
}

async function checkStreams() {
    try {
        const response = await fetch('/api/streams');
        const data = await response.json();
        
        if (data.success) {
            const publishers = data.data.publishers || {};
            const players = data.data.players || {};
            
            let message = `发布者数量: ${Object.keys(publishers).length}\n`;
            message += `播放者数量: ${Object.keys(players).length}\n`;
            
            if (Object.keys(publishers).length > 0) {
                message += `\n发布的流:\n`;
                Object.keys(publishers).forEach(streamId => {
                    message += `- ${streamId}\n`;
                });
            }
            
            showTestStatus('streamsStatus', message, Object.keys(publishers).length > 0 ? 'success' : 'info');
        } else {
            showTestStatus('streamsStatus', `获取流状态失败: ${data.message}`, 'error');
        }
    } catch (error) {
        showTestStatus('streamsStatus', `检查流状态失败: ${error.message}`, 'error');
    }
}

async function checkDrones() {
    try {
        const response = await fetch('/api/dji/streams');
        const data = await response.json();
        
        if (data.success) {
            const streams = data.data || [];
            
            let message = `无人机流数量: ${streams.length}\n`;
            
            if (streams.length > 0) {
                message += `\n无人机流状态:\n`;
                streams.forEach(stream => {
                    message += `- ${stream.id}: ${stream.status}\n`;
                });
            }
            
            showTestStatus('streamsStatus', message, 'success');
        } else {
            showTestStatus('streamsStatus', `获取无人机状态失败: ${data.message}`, 'error');
        }
    } catch (error) {
        showTestStatus('streamsStatus', `检查无人机状态失败: ${error.message}`, 'error');
    }
}

// 复制到剪贴板功能
function copyToClipboard(text) {
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
            alert('地址已复制到剪贴板: ' + text);
        }).catch(err => {
            console.error('复制失败:', err);
            fallbackCopyTextToClipboard(text);
        });
    } else {
        fallbackCopyTextToClipboard(text);
    }
}

function fallbackCopyTextToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    textArea.style.top = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        const successful = document.execCommand('copy');
        if (successful) {
            alert('地址已复制到剪贴板: ' + text);
        } else {
            prompt('请手动复制以下地址:', text);
        }
    } catch (err) {
        console.error('复制失败:', err);
        prompt('请手动复制以下地址:', text);
    } finally {
        document.body.removeChild(textArea);
    }
}

// 保存配置
function saveConfig() {
    alert('配置已保存');
}

// 快速设置主页面FLV地址
function setMainFlvUrl(url) {
    document.getElementById('flvUrl').value = url;
    showTestStatus('flvStatus', `已设置播放地址: ${url}`, 'info');
}